<template>
  <div class="menu_item">
    <el-menu
      :collapse="store.state.IsMenu"
      background-color="#011529"
      text-color="#909399"
      active-text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
      class="el-menu-vertical-demo"
    >
      <el-menu-item index="1">
        <el-icon
          ><span class="iconfont icon-chanyedashujufuwupingtai1"></span
        ></el-icon>
        <span>Navigator One</span>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><span class="iconfont icon-woderenwu"></span></el-icon>
        <span>Navigator Two</span>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon> <span class="iconfont icon-key"></span></el-icon>
        <span>Navigator Three</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const router = useRouter();
const store = useStore();
const servicesData = ref([
  { id: 1, name: '全国各区县年度GDP数据查询' },
  { id: 2, name: '全国各区县年度GDP数据估算' },
  { id: 3, name: '全国各省/市/区县夜间灯光数据查询' },
  { id: 4, name: '全国各省季度GDP数据查询' },
]);
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
let activeIndex = ref('');
const setMenu = (val) => {
  console.log(val, 'val');
  router.push({
    path: '/dataServices',
    query: {
      id: val.id,
      name: val.name,
    },
  });
  activeIndex.value = val.name;
};
onMounted(() => {});
</script>

<style scoped lang="scss">
.iconfont {
  font-size: 16px;
  margin-right: 8px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  height: 100%;
}

// ::v-deep.el-menu--vertical {
//   width: 210px;
// }
.menu_item {
  height: 100%;
  max-width: 210px;
}

.el-menu {
  height: 100%;
  border-right: 0px !important;
  background-color: transparent !important;
}

.el-menu-item:hover {
  background-color: #536dfe !important;
}

// ::v-deep  .el-submenu__title {
//   color: #909399;
// }
// ::v-deep  .el-submenu__title:hover {
//   background-color: #536dfe !important;
// }
// ::v-deep  .el-menu-item {
//   background-color: #011529;
//   color: #909399;
// }
// ::v-deep  .el-menu-item:hover {
//   background-color: #536dfe !important;
// }

// .el-menu-item.is-active {
//   background-color: #536dfe;
//   color: #fff;
// }
</style>
